<template>
  <el-row>
    <el-col :span="24">
      <div class="container">
        <!-- 页面内容 -->
        <div style="width: 100%; background-color: deepskyblue">
          <div
            style="padding-top: 15px; padding-bottom: 15px; text-align: center"
          >
            <span style="color: white; font-size: 20px; font-weight: bold">{{
              dataList.DeviceDetail
            }}</span>
          </div>
        </div>
        <div
          style="width: 100%; background-color: deepskyblue; margin-top: 2px"
        >
          <div
            style="padding-top: 15px; padding-bottom: 15px; text-align: center"
          >
            <el-row>
              <el-col :span="6">
                <div @click="clickMenu('basic')">
                  <span class="menuFont" :style="basicStyle">{{
                    dataList.DeviceBaseInfo
                  }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div @click="clickMenu('indicator')">
                  <span class="menuFont" :style="indicatorStyle">{{
                    dataList.Devicemeasuring
                  }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div @click="clickMenu('performance')">
                  <span class="menuFont" :style="performanceStyle">{{
                    dataList.DevicePerformance
                  }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div @click="clickMenu('condition')">
                  <span class="menuFont" :style="conditionStyle">{{
                    dataList.DeviceInstallationcondition
                  }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="margin-top: 2px; height: 100vh">
          <div v-if="basic">
            <el-descriptions class="margin-top" :column="1" :size="size" border>
              <el-descriptions-item
                :label="
                  $i18n.locale === 'en'
                    ? dataList.DeviceEName
                    : dataList.DeviceName
                "
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.name }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceNumber"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.num }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceClassifyId"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.classifyName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceSpecifications"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.specifications }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DevicepurposeId"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.purposeName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DevicereceiveStatusId"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.receiveStatusName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceSupplierName"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.supplierName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceFactoryNum"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.factoryNum }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceUseDate"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formatTime(formData.useDate) }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="
                  $i18n.locale === 'en'
                    ? dataList.eDeviceStorageAddress
                    : dataList.DeviceStorageAddress
                "
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.storageAddress }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DevicePersonResponsibleId"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.personResponsibleName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.Devicedepart"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.departName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DevicePhone"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.phone }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.DeviceStatus"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                {{ formData.statusName }}
              </el-descriptions-item>
              <el-descriptions-item
                :label="dataList.Deviceremark"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                <div style="height: 100px">{{ formData.remark }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div v-if="indicator">
            <el-descriptions class="margin-top" :column="1" :size="size" border>
              <el-descriptions-item
                :label="dataList.Devicemeasuring"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                <div style="height: 83vh">
                  {{ formData.measuring }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div v-if="performance">
            <el-descriptions class="margin-top" :column="1" :size="size" border>
              <el-descriptions-item
                :label="dataList.DevicePerformance"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                <div style="height: 83vh">
                  {{ formData.performance }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div v-if="condition">
            <el-descriptions class="margin-top" :column="1" :size="size" border>
              <el-descriptions-item
                :label="dataList.DeviceEnvironment"
                :label-style="labelRowCenter"
                :content-style="rowCenter"
              >
                <div style="height: 83vh">{{ formData.environment }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { GetDevice } from "../../api/Device";
import { formatTime } from "../../utils/time";
export default {
  data() {
    return {
      formData: {},
      labelRowCenter: {
        "text-align": "center",
        width: "150px",
      },
      rowCenter: {
        "text-align": "center",
      },
      basicStyle: "font-weight: bold",
      indicatorStyle: "",
      performanceStyle: "",
      conditionStyle: "",
      basic: true,
      indicator: false,
      performance: false,
      condition: false,
      size: "",
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    GetDevice({ id: this.$route.query.id })
      .then((res) => {
        this.formData = res.data.dataList[0];
      })
      .catch((res) => {});
  },
  methods: {
    formatTime,
    clickMenu(val) {
      this.basic = false;
      this.indicator = false;
      this.performance = false;
      this.condition = false;
      this.basicStyle = "";
      this.indicatorStyle = "";
      this.performanceStyle = "";
      this.conditionStyle = "";
      if (String(val) === "basic") {
        this.basic = true;
        this.basicStyle = "font-weight: bold";
      } else if (String(val) === "indicator") {
        this.indicator = true;
        this.indicatorStyle = "font-weight: bold";
      } else if (String(val) === "performance") {
        this.performance = true;
        this.performanceStyle = "font-weight: bold";
      } else if (String(val) === "condition") {
        this.condition = true;
        this.conditionStyle = "font-weight: bold";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.menuFont {
  color: white;
  font-size: 15px;
}
.container {
  /* 一般样式 */
}

/* 定义不同屏幕尺寸下的响应式样式 */
@media screen and (max-width: 768px) {
  .container {
    /* 在小屏幕设备上的样式 */
  }
}

@media screen and (min-width: 769px) {
  .container {
    /* 在大屏幕设备上的样式 */
  }
}
</style>
